<template>
<div class="staffManagement app-container">
    <el-container>
        <el-header>
          <el-button type="primary" size="small" @click="addNewAccountNum">添加账号</el-button>
          <el-form ref="searchForm" :model="searchForm">
            <el-row>
              <el-col :span="8">
                <el-form-item label="员工姓名">
                  <el-input v-model="searchForm.nickname" size="mini" placeholder="员工姓名" style="width: 200px;"></el-input>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item label="所属公司">
                  <el-cascader
                  ref="cascadeCon"
                  :options="optionsCompany"
                  :props="propsCompany"
                  clearable
                  :show-all-levels="false"
                  size="mini"></el-cascader>
                </el-form-item>
              </el-col> -->
              <el-col :span="8">
                <el-form-item>
                  <el-button type="primary" @click="searchSubmit" size="small">搜 索</el-button>
                  <el-button size="small" @click="searchReset">重 置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-header>

        <el-container>
            <el-aside width="250px">
              <div class="operation_btn">
                <p>组织架构管理</p>
                <el-dropdown @command="handleCommand" size="small">
                  <el-button type="primary" size="mini">
                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">添加</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                
              </div>
              <div class="tree_boxx">
                <el-tree
                  ref="tree"
                  :data="treeList"
                  :props="defaultProps"
                  :show-checkbox="true" 
                  :check-on-click-node="true" 
                  :check-strictly="true"
                  :default-expand-all="true"
                  node-key="id"
                  accordion
                  @check="treeCheck">
                </el-tree>
              </div>
            </el-aside>

            <el-main>
              <el-table
                :data="tableList"
                :border="true"
                height="680"
                :header-cell-style="{background:'#f5f7fa'}">
                <el-table-column label="姓名" prop="nickname" align="center">
                </el-table-column>
                <el-table-column label="用户名" prop="username" align="center">
                </el-table-column>
                <el-table-column label="角色" prop="role_name" align="center">
                </el-table-column>
                <el-table-column label="账号状态" prop="state" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.state=='1'" class="colorGreen">正常</span>
                    <span v-else class="colorRed">禁用</span>
                  </template>
                </el-table-column>
                <el-table-column label="所在部门" prop="company_name" align="center">
                </el-table-column>
                <el-table-column label="手机号" prop="mobile" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center" width="100">
                  <template slot-scope="scope">
                    <el-button class="table_btn" type="text" @click="editOperate(scope.row)">编辑</el-button>
                    <el-button class="table_btn" type="text" @click="deleteOperate(scope.row)">删除</el-button>
                    <el-button class="table_btn" type="text" @click="forbiddenOperate(scope.row)">{{scope.row.state=='1'?'禁用':'启用'}}</el-button>
                    <el-button class="table_btn" type="text" @click="resetPasswordsOperate(scope.row)">重置密码</el-button>
                  </template>
                </el-table-column>
              </el-table>

              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[7, 20, 30, 40]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </el-main>
        </el-container>
    </el-container>

    <!-- 添加公司项目弹窗 -->
    <el-dialog title="下级单位添加" :visible.sync="roleShowAdd" width="30%">
      <el-form :model="addFirmForm" :rules="rulesFirm" ref="addFirmForm" label-width="90px">
        <el-form-item label="父级公司" prop="parent_id">
          <el-tree
              :data="treeList"
              :props="defaultProps"
              :show-checkbox="true" 
              :check-on-click-node="true" 
              :check-strictly="true"
              node-key="id" 
              @check="treeCheckLog"
              ref="treeLog">
            </el-tree>
        </el-form-item>
        <el-form-item label="公司名称" prop="company_name">
          <el-input v-model="addFirmForm.company_name" style="width:100%;" placeholder="公司名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelFirmBtn">取 消</el-button>
        <el-button type="primary" @click="confirmSave">保 存</el-button>
      </div>
    </el-dialog>

    <addAccountDialog 
    :title="titleAdd" 
    :showEditAdd="showEditAdd" 
    :editRow="editRow"
    @cancelHandle="cancelHandle" 
    :treeList="treeList" 
    @saveSucDialog="saveSucDialog"/>
</div>
</template>

<script>
import addAccountDialog from './addAccountDialog.vue';
import {userList,companyList,userDel,companyAdd,userUpdate} from '@/api/release'
import {getUserInfo} from '@/utils/auth'
export default {
name: 'staffManagement',
components:{
  addAccountDialog
},
data(){
    return{
      searchForm:{
        nickname:'',
        company_id:''
      },
      page:1,
      limit:10,
      total:0,
      tableList:[],
      treeList:[],
      titleAdd:"",
      showEditAdd:false,
      editRow:{},
      propsCompany:{
        checkStrictly:true,
        label:"company_name",
        value:'id',
        children:'children'
      },
      optionsCompany:[],
      roleShowAdd:false,
      defaultProps:{
          value:'id',
          label:"company_name",
          children:"children"
      },
      addFirmForm:{
        parent_id:'',
        company_name:''
      },
      rulesFirm:{
        parent_id:[{ required: true, message: '请选择父级公司', trigger: 'blur' }],
        company_name:[{ required: true, message: '请输入公司名称', trigger: 'blur' }],
      },
    }
},
created(){
  this.getLeftTree();
  this.list(this.searchForm);
},
methods:{
  list(queryObj){
    let Obj = {
      nickname:queryObj.nickname,
      company_id:queryObj.company_id,
      page:this.page,
      limit:this.limit
    }
    userList(Obj).then(res=>{
      this.tableList = res.data;
    });
  },
  /**获取左侧树状列表**/ 
  getLeftTree(){
    companyList().then(res =>{
      this.treeList = res.data;
      this.optionsCompany = res.data;
    });
  },
  /**点击搜索按钮**/
  searchSubmit(){
    this.searchForm.company_id = '';
    this.list(this.searchForm);
  },
  /**搜索表单-点击重置**/
  searchReset(){
    this.$refs.searchForm.resetFields();
  },
  /**点击添加账号**/ 
  addNewAccountNum(){
    this.titleAdd = '添加账号';
    this.showEditAdd = true;
  },
  /**添加成功**/
  saveSucDialog(){
    this.showEditAdd = false;
    this.list();
  },
  /**关闭弹窗**/ 
  cancelHandle(){
    this.showEditAdd = false;
  },
  /**编辑**/ 
  editOperate(row){
    this.titleAdd = '编辑';
    this.showEditAdd = true;
    this.editRow = row;
  },
   /*删除**/ 
  deleteOperate(row){
    this.$confirm('确认是否删除?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      await this.removeApi(row.id);
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      });          
    });
  },
  /**禁用**/ 
  forbiddenOperate(row){
    if(row.state == '1'){
      this.$confirm(`确认禁用‘${row.username}’这个账号吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.forbiddenApi(row);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消禁用'
        });          
      });
    }else{
      this.$confirm(`确认启用‘${row.username}’这个账号吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.forbiddenApi(row);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消启用'
        });          
      });
    }
    
  },
  // userUpdate
  forbiddenApi(row){
    let stateVal;
    if(row.state =='1'){
      stateVal = '0'
    }else{
      stateVal = '1'
    }
    userUpdate({state:stateVal,id:row.id}).then(res=>{
      this.list(this.searchForm);
    });
  },
  /**重置密码**/ 
  resetPasswordsOperate(row){
    this.$confirm('确认是否重置为初始密码?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      await this.resetPasswordApi(row.id);
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消重置密码'
      });          
    });
  },
  /**删除员工接口**/ 
  removeApi(id){
    userDel({id:id}).then(res => {
      this.$message({
        message: '删除成功',
        type: 'success'
      })
      this.list();
    });
  },
  /**重置密码接口***/
  resetPasswordApi(id){
    resetPwd({id:id}).then(res => {
      this.$message({
        message: res.msg,
        type: 'success'
      })
    });
  },
  /**树状列表使其单选**/ 
  treeCheck(node,list){
      this.$refs.tree.setCheckedKeys([node.id]);
      this.searchForm.company_id = node.id;
      this.list(this.searchForm);
  },
   /**树状列表使其单选**/ 
   treeCheckLog(node,list){
      this.$refs.treeLog.setCheckedKeys([node.id]);
  },
  handleCommand(command){
    if(command == 'a'){
      //添加
      this.roleShowAdd = true;
    }
  },
  /**下级单位添加保存**/
  confirmSave(){
    let arr = this.$refs.treeLog.getCheckedKeys();
    this.addFirmForm.parent_id = arr.toString();
    this.$refs.addFirmForm.validate((valid) => {
      if (valid) {
        companyAdd(this.addFirmForm).then(res => {
          this.$message({
              message: res.msg,
              type: 'success'
          });
          this.cancelFirmBtn();
          this.getLeftTree();    
        });
      } else {
          return false;
      }
    });
  },
  cancelFirmBtn(){
    this.roleShowAdd = false;
    this.$refs.addFirmForm.resetFields();
    this.resetFirm();
  },
  resetFirm(){
    // 把已选中的复选框清除
    this.$nextTick(()=>{
      this.$refs.treeLog.setCheckedKeys([]);
    })
  },
  //分页
  handleSizeChange(val) {
    this.limit = val
    this.list()
  },
  handleCurrentChange(val) {
    this.page = val
    this.list()
  },
}
}
</script>

<style lang="scss" scoped>
.staffManagement {
  .el-header {
    background-color: #fff;
    color: #333;
    height: 60px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #f5f6f7;
    .el-form{
      margin-left: 20px;
      width: 870px;
      .el-form-item{
        margin-bottom: 0;
      }
    }
  }
  .el-aside {
    background-color: #fff;
    color: #333;
    text-align: center;
    border-right: 2px solid #f5f6f7;
    
    .operation_btn{
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f5f6f7;
      padding: 0 20px;
      margin-bottom: 10px;
      p{
        font-size: 14px;
        font-weight: bold;
      }
    }
    .tree_boxx{
      width: 100%;
      height: 700px;
      overflow: auto;
    }
  }
  
  .el-main {
    background-color: #fff;
    color: #333;
    ::v-deep .table_btn{
        padding: 2px 10px;
      }
      .el-button+.el-button{
        margin-left: 0;
      }
  }

}
</style>